<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="../dist/vue.js"></script>
    <div id="app" style="color:red;background:blue">
     <a>hello </a>  <b>world</b> <div>{{name}}</div></div>
    <script>
        // Vue 是MVVM框架 （基于mvc升级的 弱化controller这一层） vue没有完全遵循mvvm， 因为传统的mvvm框架 不能手动的操作数据  （ref 可以操作组件数据）
        // vue的核心 响应式数据原理 
        // React 是一个V框架 只是将数据转化成视图 并没有绑定的操作，更新数据也是你手动调用setState (实现组件化)

        // 响应式数据原理 Vue2中采用的是defineProperty (我们的响应式原理的目的就是监控数据的变化，数变化了更新视图，只要用户给数据赋值了，触发视图更新)
        const vm = new Vue({
            el: '#app',
            data() {
                return  {
                    name: 'zf',
                    age: 12,
                    address: '霍营',
                    arr:[{a:2}]
                }
            },
            // temolate
            // render
        });
        console.log(vm.arr); // 代理
        setTimeout(() => {
            vm.name = 'jw'; // 数据变化后可以自动的调用   vm._update(vm._render())
          
        }, 1000);
        
         // 可以通过实例的$options 来获取创造实例上传递的参数
    </script>
    
</body>

</html>


